<!DOCTYPE html>
<html>
<head>
<title>使用句柄_1</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->


<script>
	function demo1() {
		alert("句柄一");
	}
	function demo2() {
		alert("句柄二");
	}
</script>
<style type="text/css">
.div {
	height: 100px;
	width: 100px;
	background-color: red;
}
</style>
</head>
<body>

	<p>
		<button id="btn1">按钮1</button>
		<script>
			//使用句柄
			var x = document.getElementById("btn1");
			x.addEventListener("click", function() {
				alert("hello");
			});
			/*
			document.getElementById("btn1").addEventListener("click",
			function() {
				alert("hello");
			});
			 */
		</script>
	</p>

	<p>
		<button id="btn2">按钮2</button>
		<script>
			var x = document.getElementById("btn2");
			//--下面click为什么不能是加了括号的,不然会没有点击就弹出?????????
			x.addEventListener("click", demo1);
			x.addEventListener("click", demo2);
			//下面演示怎么移除句柄
			x.removeEventListener("click",demo2);
		</script>
	</p>


</body>
</html>
